<template>
  <div class="products-page">
    <header class="page-header">
      <div class="container">
        <h1>我们的产品</h1>
        <p>精心挑选的高品质产品，满足您的各种需求!</p>
      </div>
    </header>

    <section class="products-section">
      <div class="container">
        <!-- 筛选和搜索区域 -->
        <div class="filter-search-area">
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchTerm" 
              placeholder="搜索产品..." 
              class="search-input"
            />
          </div>
          <div class="filter-box">
            <select v-model="categoryFilter" class="category-select">
              <option value="all">全部分类</option>
              <option value="electronics">电子产品</option>
              <option value="home">家居用品</option>
              <option value="clothing">服装鞋帽</option>
              <option value="beauty">美妆个护</option>
            </select>
            <select v-model="sortBy" class="sort-select">
              <option value="default">默认排序</option>
              <option value="priceAsc">价格从低到高</option>
              <option value="priceDesc">价格从高到低</option>
            </select>
          </div>
        </div>

        <!-- 产品列表 -->
        <div class="products-grid">
          <div class="product-card" v-for="product in filteredProducts" :key="product.id">
            <router-link :to="`/products/${product.id}`" class="product-link">
              <div class="product-image">
                <img :src="product.image" :alt="product.name" class="product-img" />
                <div v-if="product.discount" class="discount-badge">
                  省¥{{ product.discount }}
                </div>
              </div>
              <div class="product-info">
                <div class="product-category">{{ product.category }}</div>
                <h3 class="product-name">{{ product.name }}</h3>
                <div class="product-price-container">
                  <span class="product-price">¥{{ product.price }}</span>
                  <span v-if="product.originalPrice" class="product-original-price">¥{{ product.originalPrice }}</span>
                </div>
                <div class="product-rating">
                  <div class="stars">
                    <svg v-for="i in 5" :key="i" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :style="{ color: i <= product.rating ? '#ffc107' : '#e0e0e0' }">
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                    </svg>
                  </div>
                  <span class="rating-count">({{ product.reviews }})</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>

        <!-- 无产品时的提示 -->
        <div v-if="filteredProducts.length === 0" class="no-products">
          <p>没有找到符合条件的产品</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchTerm = ref('')
const categoryFilter = ref('all')
const sortBy = ref('default')

// 产品数据
const products = ref([
  {
    id: 1,
    name: '智能手表 Pro',
    price: 1299,
    originalPrice: 1499,
    category: '电子产品',
    image: 'https://picsum.photos/id/1/400/400',
    rating: 4.8,
    reviews: 128,
    discount: 200
  },
  {
    id: 2,
    name: '无线蓝牙耳机',
    price: 899,
    originalPrice: 999,
    category: '电子产品',
    image: 'https://picsum.photos/id/2/400/400',
    rating: 4.6,
    reviews: 203,
    discount: 100
  },
  {
    id: 3,
    name: '智能音箱',
    price: 699,
    category: '电子产品',
    image: 'https://picsum.photos/id/3/400/400',
    rating: 4.5,
    reviews: 98
  },
  {
    id: 4,
    name: '高清投影仪',
    price: 2499,
    originalPrice: 2999,
    category: '电子产品',
    image: 'https://picsum.photos/id/4/400/400',
    rating: 4.7,
    reviews: 67,
    discount: 500
  },
  {
    id: 5,
    name: '北欧风格沙发',
    price: 3999,
    category: '家居用品',
    image: 'https://picsum.photos/id/5/400/400',
    rating: 4.9,
    reviews: 34
  },
  {
    id: 6,
    name: '智能扫地机器人',
    price: 1599,
    originalPrice: 1899,
    category: '家居用品',
    image: 'https://picsum.photos/id/6/400/400',
    rating: 4.4,
    reviews: 156,
    discount: 300
  },
  {
    id: 7,
    name: '纯棉T恤',
    price: 129,
    category: '服装鞋帽',
    image: 'https://picsum.photos/id/7/400/400',
    rating: 4.3,
    reviews: 210
  },
  {
    id: 8,
    name: '运动鞋',
    price: 599,
    originalPrice: 799,
    category: '服装鞋帽',
    image: 'https://picsum.photos/id/8/400/400',
    rating: 4.6,
    reviews: 89,
    discount: 200
  },
  {
    id: 9,
    name: '护肤套装',
    price: 799,
    category: '美妆个护',
    image: 'https://picsum.photos/id/9/400/400',
    rating: 4.8,
    reviews: 124
  },
  {
    id: 10,
    name: '香水礼盒',
    price: 1299,
    originalPrice: 1599,
    category: '美妆个护',
    image: 'https://picsum.photos/id/10/400/400',
    rating: 4.7,
    reviews: 76,
    discount: 300
  },
  {
    id: 11,
    name: '咖啡机',
    price: 1999,
    category: '家居用品',
    image: 'https://picsum.photos/id/11/400/400',
    rating: 4.5,
    reviews: 54
  },
  {
    id: 12,
    name: '智能台灯',
    price: 299,
    category: '电子产品',
    image: 'https://picsum.photos/id/12/400/400',
    rating: 4.4,
    reviews: 178
  }
])

// 过滤和排序产品
const filteredProducts = computed(() => {
  let result = [...products.value]
  
  // 按搜索词过滤
  if (searchTerm.value) {
    const term = searchTerm.value.toLowerCase()
    result = result.filter(product => 
      product.name.toLowerCase().includes(term) || 
      product.category.toLowerCase().includes(term)
    )
  }
  
  // 按分类过滤
  if (categoryFilter.value !== 'all') {
    result = result.filter(product => product.category === categoryFilter.value)
  }
  
  // 排序
  switch (sortBy.value) {
    case 'priceAsc':
      result.sort((a, b) => a.price - b.price)
      break
    case 'priceDesc':
      result.sort((a, b) => b.price - a.price)
      break
    default:
      // 默认排序（按ID）
      result.sort((a, b) => a.id - b.id)
  }
  
  return result
})
</script>

<style scoped>
.products-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.page-header p {
  font-size: 1.1rem;
}

.products-section {
  padding: 60px 0;
}

.filter-search-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.search-box {
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 30px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #667eea;
}

.filter-box {
  display: flex;
  gap: 15px;
  align-items: center;
}

.category-select, .sort-select {
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 30px;
  font-size: 1rem;
  background-color: white;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.category-select:focus, .sort-select:focus {
  border-color: #667eea;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-img {
  transform: scale(1.05);
}

.discount-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #ff4757;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.product-info {
  padding: 20px;
}

.product-category {
  color: #667eea;
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.product-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
  line-height: 1.4;
}

.product-price-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}

.product-original-price {
  font-size: 1rem;
  color: #999;
  text-decoration: line-through;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars {
  display: flex;
  gap: 2px;
}

.rating-count {
  font-size: 0.9rem;
  color: #666;
}

.no-products {
  text-align: center;
  padding: 60px 0;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-search-area {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .filter-box {
    justify-content: space-between;
  }
  
  .category-select, .sort-select {
    flex: 1;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-box {
    flex-direction: column;
    gap: 10px;
  }
  
  .category-select, .sort-select {
    width: 100%;
  }
}
</style>